<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>运单管理</title>
	<!-- <meta name="decorator" content="default"/> -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- Vendor CSS-->
		<link href="${weiZe }/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="${weiZe }/assets/vendor/skycons/css/skycons.css" rel="stylesheet" />
		<link href="${weiZe }/assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="${weiZe }/assets/vendor/css/pace.preloader.css" rel="stylesheet" />
		<!-- Plugins CSS-->
		<link href="${weiZe }/assets/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
		<link href="${weiZe }/assets/plugins/pnotify/css/pnotify.custom.css" rel="stylesheet" />					
		<!-- Theme CSS -->
		<link href="${weiZe }/assets/page/css/index/jquery.mmenu.css" rel="stylesheet " />
		<!-- Page CSS -->		
		<link href="${weiZe }/assets/page/css/index/index.css" rel="stylesheet" />
		<link href="${weiZe }/assets/page/css/index/add-ons.min.css" rel="stylesheet" />
		<!-- end: CSS file-->	
		<!-- Head Libs -->
		<script src="${weiZe }/assets/plugins/modernizr/js/modernizr.js"></script>
		<style type="text/css">
				.main {
		  	 		background: #ecedf0 none repeat scroll 0 0;
				    padding: 50px 37px 98px 83px;
				}
		</style>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					//loading('正在提交，请稍等...');
					$("#w4").addClass("overlay");
					$("#zhuang").removeClass("hide")
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			}); 
			if($(":select[path=tbWaybillDetailOne.settlement]").val()=="0" || $(".tbWaybillDetailTwoSelect2").val()=="1"){
				$(":input[path=tbWaybillDetailOne.unitPrice]").hide();
			}
			if($(":select[path=tbWaybillDetailTwo.settlement]").val()=="0" || $(".tbWaybillDetailTwoSelect2").val()=="1"){
				$(":input[path=tbWaybillDetailOne.unitPrice]").hide();
			}
			if($(":select[path=tbWaybillDetailTwo.settlement]").val()=="0" || $(".tbWaybillDetailTwoSelect2").val()=="1"){
				$(":input[path=tbWaybillDetailOne.unitPrice]").hide();
			}
		});
	</script>
	<style type="text/css">
	    .col-sm-1{
	        padding-right: 0;
	        margin-right: 0;
	    }
	    .control-label{
	        padding-right: 0;
	        margin-right: 0;
	    }
	    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            min-height: 1px;
            padding-left: 15px;
            position: relative;
}
	</style>

</head>
<body>
<div  class="panel panel-default form-wizard " id="w4">
	<i id="zhuang" class="fa fa-refresh fa-spin hide"></i>
	<div class="panel-heading">
		<h6 style="height: 25px;"><i class="fa fa-tags bk-fg-warning"></i>运单新建</h6>									
	</div>
	<form:form id="inputForm" modelAttribute="tbWaybill" action="${ctx}/tb_waybill/tbWaybill/saveNew" method="post"  class="form-horizontal" novalidate="novalidate">
		<form:hidden path="id"/>
		<form:hidden id="lahuoNumber" path="number"/>
		<sys:message content="${message}"/>	
	<!-- <form class="form-horizontal" novalidate="novalidate"> -->
		<div class="tab-content">
			<div id="w4-account" class="tab-pane active">
			<div class="form-group">
					<label class="col-sm-1 control-label" for="w4-username">运单编号（内部编码）</label>
					<div class="col-sm-9">
						<form:input path="waybillNum" htmlEscape="false" maxlength="50" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label" for="w4-username">装货地1</label>
					<div class="col-sm-9">
						<!-- <input type="text" class="form-control" name="" id="" required="required"> -->
						<form:select id="loadingAddressId" path="tbLoadingAddress.id" class="form-control">
							<form:option value="" label=""/>
							<form:options items="${loadingAddress}" itemValue="id" itemLabel="shortName" htmlEscape="false"/>
						</form:select>
						
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label" for="w4-password">装货地2</label>
					<div class="col-sm-9">
						<!-- <input type="text" class="form-control" name="" id="" > -->
						<form:select id="tbLoadingAddressTwoId" path="tbLoadingAddressTwo.id" class="form-control">
							<form:option value="" label=""/>
							<form:options items="${loadingAddress}" itemValue="id" itemLabel="shortName" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label" for="w4-password">承运公司</label>
					<div class="col-sm-9">
						<!-- <input type="text" class="form-control" name="" id="" > -->
						<form:select  path="tbGoodsConsignmentCompany.id" class="form-control">
							<form:option value="" label=""/>
							<form:options items="${goodsConsignmentCompany}" itemValue="id" itemLabel="shortName" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label" for="w4-password">车辆和时间</label>
					<div class="col-sm-5">
						<form:select id="carId" path="tbCarInfo.id" class="form-control"   >
							<form:option value="" label=""/>
							<form:options items="${tbCarInfo}"  itemValue="id"  itemLabel="carCode"  htmlEscape="false"/>
						</form:select>
					</div>
					<div class="col-sm-4">
						<input name="outCarTime" type="text" readonly="readonly" maxlength="20" class="form-control "
							value="<fmt:formatDate value="${outCarTime}" pattern="yyyy-MM-dd"/>"
							onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
					</div>
				</div>
			<div id="w4-profile" class="tab-pane">				
				<div class="form-group" id="tb_waybill_detail_one">
					<label class="col-sm-1 control-label" for="w4-first-name">(1)结算方式</label>
					<div class="col-sm-2">
						<form:select class="form-control  tbWaybillDetailontSelect2" path="tbWaybillDetailOne.settlement"  name="exp-month"  >
							<form:option value=""></form:option>
							<form:option value="0">计量*运价</form:option>
							<form:option value="1">计量*公里*运价</form:option>
							<form:option value="2">固定运费</form:option>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(1)品名</label>
					<div class="col-sm-2">
						<form:select id="goodsId" path="tbWaybillDetailOne.goodId" class="form-control">
							<form:option value="" label=""/>
							<form:options items="${goods}" itemValue="id" itemLabel="goodName" htmlEscape="false"/>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(1)卸货地址</label>
					<div class="col-sm-2">
						<form:select id="DischargeCargoAddressOneId" path="tbWaybillDetailOne.tbDischargeCargoAddress.id" class="form-control tbWaybillDetailOneSelect">
							<form:option value="" label=""/>
							<form:options items="${dischargeCargoAddress}" itemValue="id" itemLabel="name" htmlEscape="false"/>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(1)拉运重量(单位/t)</label>
					<div class="col-sm-2">
						<form:input path="tbWaybillDetailOne.weight" htmlEscape="false" class="form-control"/>
					</div>
					
					<label class="col-sm-1 control-label" for="w4-first-name">(1)运输里程</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailOne.length" htmlEscape="false" class="form-control"/>
					</div>
					
					<label class="col-sm-1 control-label" for="w4-first-name">(1)运价</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailOne.unitPrice" htmlEscape="false" class="form-control"/>
					</div>
					
					<label class="col-sm-1 control-label" for="w4-first-name">(1)运费</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailOne.unitPrice" htmlEscape="false" class="form-control"/>
					</div>					
				</div>
				
				<div class="form-group hidden" id="tb_waybill_detail_two">
					<label class="col-sm-1 control-label" for="w4-first-name">(2)结算方式</label>
					<div class="col-sm-2">
						<form:select class="form-control  tbWaybillDetailTwoSelect2" path="tbWaybillDetailTwo.settlement"  name="exp-month"  >
							<form:option value=""></form:option>
							<form:option value="0">计量*运价</form:option>
							<form:option value="1">计量*公里*运价</form:option>
							<form:option value="2">固定运费</form:option>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(2)品名</label>
					<div class="col-sm-2">
						<form:select id="goodsId" path="tbWaybillDetailTwo.tbGoods.id" class="form-control  tbWaybillDetailTwoSelect">
							<form:option value="" label=""/>
							<form:options items="${goods}" itemValue="id" itemLabel="goodName" htmlEscape="false"/>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(2)卸货地址</label>
					<div class="col-sm-2">
						<form:select id="DischargeCargoAddressTwoId" path="tbWaybillDetailTwo.tbDischargeCargoAddress.id" class="form-control tbWaybillDetailThreeSelect">
							<form:option value="" label=""/>
							<form:options items="${tbDischargeCargoAddress}" itemValue="id" itemLabel="name" htmlEscape="false"/>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(2)拉运重量(单位/t)</label>
					<div class="col-sm-2">
						<form:input path="tbWaybillDetailTwo.weight" htmlEscape="false" class="form-control tbWaybillDetailTwoInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(2)运输里程</label>
					<div class="col-sm-2">
						<form:input path="tbWaybillDetailTwo.length" htmlEscape="false" class="form-control tbWaybillDetailThreeInput"/>
					</div>
					</div>
				</div>
				<div class="form-group hidden" id="tb_waybill_detail_three">
					<label class="col-sm-1 control-label" for="w4-first-name">(3)结算方式</label>
					<div class="col-sm-2">
						<form:select class="form-control  tbWaybillDetailThreeSelect2" path="tbWaybillDetailThree.settlement"  name="exp-month" >
							<form:option value=""></form:option>
							<form:option value="0">计量*运价</form:option>
							<form:option value="1">计量*公里*运价</form:option>
							<form:option value="2">固定运费</form:option>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(3)品名</label>
					<div class="col-sm-2">
						<form:select id="goodsThreeId" path="tbWaybillDetailThree.tbGoods.id" class="form-control tbWaybillDetailThreeSelect">
							<form:option value="" label=""/>
							<form:options items="${goods}" itemValue="id" itemLabel="goodName" htmlEscape="false"/>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(3)卸货地址</label>
					<div class="col-sm-2">
						<form:select id="DischargeCargoAddressThreeId" path="tbWaybillDetailThree.tbDischargeCargoAddress.id" class="form-control tbWaybillDetailThreeSelect">
							<form:option value="" label=""/>
							<form:options items="${tbDischargeCargoAddress}" itemValue="id" itemLabel="name" htmlEscape="false"/>
						</form:select>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">(3)拉运重量(单位/t)</label>
					<div class="col-sm-2">
						<form:input path="tbWaybillDetailThree.weight" htmlEscape="false" class="form-control  tbWaybillDetailThreeInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-first-name">运输里程</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailThree.length" htmlEscape="false" class="form-control tbWaybillDetailThreeInput"/>
					</div>					
				</div>
				
			</div>
			<div id="w4-billing" class="tab-pane">
				<div class="form-group" id="tb_waybill_detail_one">
					<label class="col-sm-1 control-label" for="w4-first-name">运输里程1</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailOne.length" htmlEscape="false" class="form-control tbWaybillDetailThreeInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">运价(1)</label>
					<div class="col-sm-3">
						<form:input path="tbWaybillDetailOne.unitPrice" htmlEscape="false" class="form-control "/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">运费(1)</label>
					<div class="col-sm-3">
						<form:input path="tbWaybillDetailOne.money" htmlEscape="false" class="form-control"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">收货地址(1)</label>
					<div class="col-sm-2">
						<form:select id="goodsId" path="tbWaybillDetailTwo.tbDischargeCargoAddress.id" class="form-control  tbWaybillDetailTwoSelect">
							<form:option value="" label=""/>
							<form:options items="${goods}" itemValue="id" itemLabel="goodName" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
			</div>
			<div id="w4-billing" class="tab-pane">
				<div class="form-group hidden"  id="tb_waybill_detail_two_two">
					<label class="col-sm-1 control-label" for="w4-first-name">运输里程2</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailTwo.length" htmlEscape="false" class="form-control tbWaybillDetailThreeInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">运价(2)</label>
					<div class="col-sm-3">
						<form:input path="tbWaybillDetailTwo.unitPrice" htmlEscape="false" class="form-control  tbWaybillDetailTwoInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">运费(2)</label>
					<div class="col-sm-3">
						<form:input path="tbWaybillDetailTwo.money" htmlEscape="false" class="form-control tbWaybillDetailTwoInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">收货地址(2)</label>
					<div class="col-sm-2">
						<form:select id="goodsId" path="tbWaybillDetailTwo.tbDischargeCargoAddress.id" class="form-control  tbWaybillDetailTwoSelect">
							<form:option value="" label=""/>
							<form:options items="${tbDischargeCargoAddress}" itemValue="id" itemLabel="goodName" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
			</div>
			<div id="w4-billing" class="tab-pane">
				<div class="form-group hidden" id="tb_waybill_detail_three_three">
					<label class="col-sm-1 control-label" for="w4-first-name">运输里程3</label>
					<div class="col-sm-2">
						<form:input  path="tbWaybillDetailThree.length" htmlEscape="false" class="form-control tbWaybillDetailThreeInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">运价(3)</label>
					<div class="col-sm-3">
						<form:input  path="tbWaybillDetailThree.unitPrice" htmlEscape="false" class="form-control  tbWaybillDetailThreeInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">运费(3)</label>
					<div class="col-sm-3">
						<form:input path="tbWaybillDetailThree.money" htmlEscape="false" class="form-control  tbWaybillDetailThreeInput"/>
					</div>
					<label class="col-sm-1 control-label" for="w4-cc">收货地址(3)</label>
					<div class="col-sm-2">
						<form:select id="DischargeCargoAddressId" path="tbWaybillDetailThree.tbDischargeCargoAddress.id" class="form-control  tbWaybillDetailTwoSelect">
							<form:option value="" label=""/>
							<form:options items="${tbDischargeCargoAddress}" itemValue="id" itemLabel="name" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
			</div>
			<div id="w4-billing" class="tab-pane">
				<div class="form-group">
					<label class="col-sm-1 control-label" for="w4-cc">备注</label>
					<div class="col-sm-3">
						<form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="255" class="form-control"/>
					</div>
				</div>
			</div>
			<div id="w4-confirm" class="tab-pane">
				<shiro:hasPermission name="tb_waybill:tbWaybill:edit"><input id="btnSubmit" class="fa fa-angle-right  hidden" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			</div>
		</div>
		</div>
	</form:form>
	
	<div class="panel-footer bk-bg-very-light-gray bk-radius">
		<ul class="pager bk-margin-off">
			<li class="previous  disabled">
				<a href="javascript:void(0);"  onclick="history.go(-1)"><i class="fa fa-angle-left"></i> 返回</a>
			</li>
			<li class="finish  pull-right">
				<a onclick="btnSubmit()">提交<i class="fa fa-angle-right"></i></a>
			</li>
			<li class="previous  addAddress">
				<a id= "addAddress" href="javascript:void(0);" onclick="addAddress(this,event)">添加收货地址</a>
			</li>
			<li class="previous closeAddress hidden" >
				<a href="javascript:void(0);" onclick="closeAddress(this,event)">删除收货地址</a>
			</li>
		</ul>
	</div>
</div>
	
	<!-- Vendor JS-->				
		<script src="${weiZe }/assets/vendor/js/jquery.min.js"></script>
		<script src="${weiZe }/assets/vendor/js/jquery-2.1.1.min.js"></script>
		<script src="${weiZe }/assets/vendor/js/jquery-migrate-1.2.1.min.js"></script>
		<script src="${weiZe }/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="${weiZe }/assets/vendor/skycons/js/skycons.js"></script>	
		<script src="${weiZe }/assets/vendor/js/pace.min.js"></script>
		
		<!-- Plugins JS-->
		<script src="${weiZe }/assets/plugins/autosize/jquery.autosize.min.js"></script>
		<script src="${weiZe }/assets/plugins/jquery-validation/js/jquery.validate.js"></script>
		<script src="${weiZe }/assets/plugins/wizard/js/jquery.bootstrap.wizard.min.js"></script>
		<script src="${weiZe }/assets/plugins/pnotify/js/pnotify.custom.js"></script>	
		<script src="${weiZe }/assets/plugins/sparkline/js/jquery.sparkline.min.js"></script>
		
		<!-- Theme JS -->		
		<script src="${weiZe }/assets/js/jquery.mmenu.min.js"></script>
		<script src="${weiZe }/assets/js/core.min.js"></script>
		
		<!-- Pages JS -->
		<script src="${weiZe }/assets/page/js/newCarlist/newCarlist.js"></script>
		
		<script src="${ctxStatic }/My97DatePicker/WdatePicker.js"></script>
		
		<script type="text/javascript">
			var num = 1;
			
			$(function(){
				var number = $("#lahuoNumber").val();
				if(num == typeof("undefined") && num == null){
					num=1;
				}else{
					num = number;
				}
				if(num != 1){
					$("#addAddress").click();
				}

			});
			/*添加栏位*/
			function addAddress(obj,e){
				if(num < 3){num++;};
				if(num == 2){
					$("#tb_waybill_detail_two").removeClass("hidden");
					$("#tb_waybill_detail_two_two").removeClass("hidden");
					$(".closeAddress").removeClass("hidden");
				}else if(num == 3){
					$("#tb_waybill_detail_two").removeClass("hidden");
					$("#tb_waybill_detail_two_two").removeClass("hidden");
					$("#tb_waybill_detail_three").removeClass("hidden");
					$("#tb_waybill_detail_three_three").removeClass("hidden");
					$(obj).parent().addClass("hidden");
				}
				$("#lahuoNumber").val(num)
			}
			/**删除栏位*/
			function closeAddress(obj,e){
				if(num > 1){num--;};
				if(num == 2){
					$("#tb_waybill_detail_three").addClass("hidden");
					$("#tb_waybill_detail_three_three").addClass("hidden");
					//$("#tb_waybill_detail_three_three>input").val("");
					
					$(".addAddress").removeClass("hidden");
				}else if(num == 1){
					$("#tb_waybill_detail_two").addClass("hidden");
					$("#tb_waybill_detail_two_two").addClass("hidden");
					
					$(obj).parent().addClass("hidden");
				}
				
				$("#lahuoNumber").val(num);
				
			}
			
			function btnSubmit(){
				$("#btnSubmit").click();
			}
		
		</script>
		
</body>
</html>